<template>
  <span>{{ x }}</span> × <span>{{ y }}</span> = <span> {{ p }} </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

let props = defineProps({
  x: { type: Number, default: 1, required: true },

  y: { type: Number, default: 1, required: true }
})

/* 方案A */

/*
  
  function mul() {
  
    return props.x * props.y * a;
  
  }
  
  let p = computed(mul);
  
  */

/* 方案B */

/*
  
  let mul = function(){
  
    return props.x * props.y
  
  }
  
  let p = computed(mul);
  
  */

/* 方案C */

/*
  
  let mul = () => {
  
    return props.x * props.y
  
  }
  
  let p = computed(mul);
  
  */

/* 方案D */

let p = computed(() => props.x * props.y)
</script>

<style scoped></style>
